<template>
  <section>
    <div v-wechat-title="pageTitle" v-if="pageTitle"></div>
    <div class="bg-color-white pd10" v-if="activity">
      <div class="text-center strong font-biger">{{activity.name}}</div>
      <div class="text-center font-big mt10">活动时间：{{activity.begin_time|timeFormat('yyyy-MM-dd hh:mm:ss')}} 至 {{activity.end_time|timeFormat('yyyy-MM-dd hh:mm:ss')}}</div>
    </div>

    <div class="mt10 pb10 bg-color-white" style="padding-top: 100px; padding-bottom: 100px;" v-if="activity">
      <div class="text-center" v-if="joined">
        <img :src="STATIC_BASE_URL + 'images/mp/welcome.jpg'" style="width: 80%;" />
      </div>
      <div class="text-center" v-else>
        <img :src="STATIC_BASE_URL + 'images/mp/weiqu.jpg'" width="50%" />
        <p class="font-large">很抱歉，您还未报名参加该活动。</p>
      </div>
    </div>
  </section>
</template>

<script>
  import Vue from 'vue';
  import {Toast, Dialog} from 'vant';
  import {activitySignInUri, STATIC_BASE_URL, wechatJsApiConfigUri} from "../../common/api";

  Vue.use(Toast).use(Dialog);

  export default {
    data() {
      return {
        STATIC_BASE_URL: STATIC_BASE_URL,
        pageTitle: null,
        user: null,
        member: null,
        activity: null,
        joined: false
      }
    },
    methods: {
      getJsApiConfig() {
        if(!isWxServiceEnable) {
          return;
        }
        const that = this;
        const url = wechatJsApiConfigUri + '?url=' + encodeURIComponent(window.location.href);
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
          } else {
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: data.appId, // 必填，公众号的唯一标识
              timestamp: data.timestamp, // 必填，生成签名的时间戳
              nonceStr: data.nonceStr, // 必填，生成签名的随机串
              signature: data.signature,// 必填，签名
              jsApiList: ['hideAllNonBaseMenuItem'] // 必填，需要使用的JS接口列表
            });

            wx.ready(function () {
              wx.hideAllNonBaseMenuItem();
            });

            wx.error(function (res) {

            });
          }
        }, response => {
          // error callback
        })
      },
      getInfo() {
        const that = this;
        this.$http.get(activitySignInUri + '?id=' + this.$route.query.id).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
            that.$router.replace({name: 'Home'})
          } else {
            that.activity = data.activity;
            that.joined = data.joined;
            that.pageTitle = data.activity.name + '-相亲活动';
          }
        }, response => {
          // error callback
        })
      }
    },
    created: function () {
      let _href = window.location.href;
      if (isWxServiceEnable && _href.indexOf('&replace=1') <= -1) {
        window.location.replace(_href + '&replace=1')
      }
    },
    mounted: function () {
      if (this.GLOBAL.userInfo) {
        this.user = this.GLOBAL.userInfo;
        this.member = this.GLOBAL.memberProfile;
        this.getInfo();
      }
      this.EventBus.$on('OnUserLogined', () => {
        this.user = this.GLOBAL.userInfo;
        this.member = this.GLOBAL.memberProfile;
        this.getInfo();
      });

      this.getJsApiConfig();
    }
  }
</script>

<style scoped>

</style>
